<template>
    <div>
        <headbar title="我的"
        :left="true"
        :right="true"
        classleft="el-icon-back"
        classright="el-icon-error"
        @handleright="quite"
        @handleleft="toback"></headbar>

        <div v-if="!islogin" class="before">
            <div>未登入，请先登入</div>
            <el-button icon="el-icon-user-solid" circle @click="showlogin = !showlogin"></el-button>
        </div>
        
        <div v-if="islogin" class="user mar">
            <div class="name">{{ userobj.name }}</div>
            <div class="username textbox">{{ userobj.username }}</div>
            <div class="sex"><i :class="userobj.sex === 'male'?'el-icon-male':'el-icon-female'"></i></div>
            <div class="livecity textbox">{{ userobj.livecity }}</div>
            <div class="change" @click="showchange = true">修改信息</div>
            <div class="explore">
                <div class="title"><i class="iconfont icon-a-faxianquanzi"></i>探索</div>
                <div class="mainbox">
                    <windows 
                    v-for="item in exploreobj" 
                    :key="item.id" :img="item.picture[0]" 
                    :name="item.title" 
                    :text="item.centent"
                    :showdelete="true"
                    @click.native="todetail(item)"
                    @deleteExploration="delexp(item.id)"></windows>
                </div>
            </div>
        </div>

        <div class="loginbox" v-if="showchange" @click="showchange = false">
            <change class="login" @click.native = "nohide" @changeFinish="handlechange"></change>
        </div>

        <div class="loginbox" v-if="showlogin" @click="showlogin = false">
            <login class="login" @click.native = "nohide" @loginFinish="handlelogin"></login>
        </div>
    </div>
</template>

<script>
import headbar from '@/components/headbar.vue';
import login from '@/components/login.vue';
import change from '@/components/changemassage.vue';
import windows from '@/components/windows.vue';
import axios from 'axios';

export default {
    components:{
        headbar,
        login,
        change,
        windows
    },
    data(){
        return{
            showlogin: false,
            showchange: false,
            islogin:true,
            userobj:{},
            exploreobj:[]
        }
    },
    mounted(){
        if(!window.sessionStorage.getItem('token')){
            this.islogin = false
        }else{ 
            axios(`http://localhost:3000/users?id=${window.sessionStorage.getItem('token')}`).then(res=>{
                this.userobj = res.data[0]
                this.$store.commit('changeUserObj',res.data[0])
                this.$store.commit('changeCity',res.data[0].livecity)
            })
            axios(`http://localhost:3000/exploration?userid=${window.sessionStorage.getItem('token')}`).then(res=>{
                console.log(res.data)
                this.exploreobj = res.data
            })
        }

    },
    methods:{
        toback(){  //返回上一个页面
            this.$router.back()
        },
        nohide(evt){  // 阻止默认行为
            evt.stopPropagation()
        },
        handlelogin(item){ //获取用户信息
            this.showlogin = false
            this.islogin = true
            this.userobj = item
            axios(`http://localhost:3000/exploration?userid=${item.id}`).then(res=>{
                console.log(res.data)
                this.exploreobj = res.data
            })
        },
        handlechange(item){
            console.log(item)
            this.userobj = item
            this.showchange = false
        },
        todetail(item){
            this.$store.commit('changeWorldObj',item)
            this.$router.push('/detail')
        },
        delexp(id){
            axios.delete(`http://localhost:3000/exploration?id=${id}`)
            .then(res=>{
                for(let i=0;i<this.exploreobj.length;i++){
                    if(this.exploreobj.id == id){
                        this.exploreobj.splice(i,1)
                    }
                }
            })
            console.log(id)
        },
        quite(){
            sessionStorage.removeItem('token')
            this.$router.push('/home')
        }
    }
}
</script>

<style lang="scss" scoped>
.user{
    margin-bottom: 0.6rem;
}
.mainbox{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.loginbox{
    position: fixed;
    top: 0.5rem;
    left: 0;
    background-color: rgba($color: #000000, $alpha: 0.5);
    width: 100%;
    height: 5.6rem;
}
.login{
    background-color: white;
    border-radius: 10px;
    position: relative;
    top:1.54rem
}
.before{
    width: 100%;
    text-align: center;
    position: relative;
    top: 2rem;
}
.name{
    font-size: 30px;
}
.textbox{
    margin: 10px 0;
    color: rgb(124, 127, 126);
}
.change{
    color: rgb(74, 152, 126);
    margin: 10px 0;
}
.title{
    width: 100%;
    font-size: 20px;
    height: 0.30rem;
    padding: 20px 0;
    color: rgb(74, 152, 126);
    border-bottom: 1px solid rgb(74, 152, 126);
}
</style>